<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../adminlte/plugins/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/dist/css/adminlte.min.css">
    <!-- 模态框css -->
    <link rel="stylesheet" href="../dece/css/de_pop.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app" v-cloak>

    <!-- Navbar -->
    <super-navbar></super-navbar>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <super-aside></super-aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-12" style="display: flex;">
                        <h1 class="m-0 text-dark">商品分类管理</h1>
                        <button @click="add" class="btn btn-info">添加商品分类</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">搜索</h3>
                            <div class="card-tools">
                                <div class="input-group input-group-sm">
                                    <select class="form-control">
                                       <option v-for="type in type_list" :value="type.id">{{type.typename}}</option> 
                                    </select>
                                    <input type="text" class="form-control">
                                    <input type="text" class="form-control">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                        <table class="table table-condensed">
                        <tr>
                            <th style="width: 10%">ID</th>
                            <th style="width: 10%">商户ID</th>
                            <th style="width: 35%">名称</th>
                            <th style="width: 10%">父ID</th>
                            <th style="width: 10%">层级</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                        <tr v-for="row in data_list">
                            <td>{{row.id}}</td>
                            <td>{{row.goods_name}}</td>
                            <td>{{row.goods_name}}</td>
                            <td>{{row.price}}</td>
                            <td>{{row.sales}}</td>
                            <td>
                                <button @click="edit(row.id)" type="button" class="btn btn-outline-success btn-sm">修改</button>
                                <button @click="del(row.id)" type="button" class="btn btn-outline-danger btn-sm">删除</button>
                            </td>
                        </tr>
                        </table>
                        </div>
                        <div class="card-footer clearfix">
                            <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item"><a @click="index(1)" class="page-link" href="#">&laquo;</a></li>
                                <template v-for="(val, key) in pages.all_page">
                                    <li class="page-item" :class="{active: val == pages.p}"><a @click="index(val)" class="page-link" href="#">{{val}}</a></li>
                                </template>
                                <li class="page-item"><a @click="index(pages.all_page)" class="page-link" href="#">&raquo;</a></li>
                            </ul>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
    <!-- 模态框 -->
    <div class="pop" style="display: none;" v-show="pop.info == 1">
        <div class="pop_mid">
        <div class="pop_box">
            <div class="header">
                <h3>添加商品</h3>
                <div @click="pop_tig('info', 0)">X</div>
            </div>
            <div class="block row" style="font-size: 15px;">
                <div class="col-6">
                    <div class="form-group">
                        <label>商户</label>
                        <select v-model="pop.dd.is_hot" class="form-control">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>分类名称</label>
                        <input v-model="pop.dd.goods_name" type="text" class="form-control">
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label>父ID</label>
                        <select v-model="pop.dd.is_hot" class="form-control">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>层级</label>
                        <select v-model="pop.dd.is_hide" class="form-control">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                </div>
                <div class="col-12">
                    <button @click="change" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../adminlte/dist/js/adminlte.js"></script>
<!-- 新加js -->
<script src="../dece/js/vue.js"></script>
<script src="../dece/js/axios.min.js"></script>
<script src="../dece/js/app.js"></script>
<script src="../dece/js/vue_component.js"></script>
<script type="text/javascript">

        new Vue({
            el: "#app",
            data: {
                // 模态框配置
                pop: {
                    add: 1,
                    info: 0,
                    dd: {}
                },
                add_default: {
                    tid: 1,
                },
                api_host: de.api_host,
                data_list: {},
                type_list: {},
                pages: {},
            },
            created: function (){
                // this.goods_type();
                // this.index(1);
            },
            mounted: function (){

            },
            methods: {
                // 商品分类
                goods_type: function (){
                    var the = this;
                    axios.get(de.goods_goods_type).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.type_list = dd.data;
                        } else if (dd.code == 230) {
                            alert(dd.info);
                            de.href("../index.html");
                        } else {
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 列表
                index: function ( p ){
                    var the = this;
                    axios.post(de.goods_index, {tid: 1, p: p}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.data_list = dd.data;
                            the.pages = de.page(dd.page);
                            console.log(the.pages);
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 添加
                add: function (){
                    // 数据初始化
                    this.pop.dd = this.add_default;
                    // 打开弹框
                    this.pop_tig('info', 1);
                },
                // 修改
                edit: function ( id ){
                    var the = this;
                    axios.post(de.goods_detail, {id: id}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            // 数据赋值
                            the.pop.dd = dd.data;
                            // 打开弹框
                            the.pop_tig('info', 1);
                        } else {
                            alert(dd.info);
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                change: function (){
                    var the = this;
                    axios.post(de.goods_save, the.pop.dd).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        alert(dd.info);
                        if (dd.code == 200) {
                            the.pop_tig('info', 0);
                            the.index(the.pages.p);
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 删除
                del: function ( id ){
                    var r = confirm("确定要删除吗？")
                    if (r !== true) { return false; }
                    var the = this;
                    axios.post(de.goods_del, {id: id}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            alert(dd.info);
                            the.index(the.pages.p);
                        } else {
                            alert(dd.info);
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 弹框操作函数
                pop_tig: function ( name , stat ){
                    eval("this.pop."+name+"="+stat);
                }
            },
        });
</script>
</body>
</html>
